That actually is a bug.

See, they use import() function on a string, that is the result of path.resolve() call. As you have already noticed, the import() function only works with file:// and data:// URLs, but path.resolve() only returns an absolute path (not a URL), which on Windows environment usually starts with the name of the local disk (e.g., C:).

My problem is because my Node.js version is too low. Upgrade to Node.js 16 solved the problem.

I have found a possible workaround!

As @Dima Parzhitsky points out, this seems to be a bug in Vue. The part of Vue containing that bug is the loader for the vue.config.js (or .mjs/.cjs) configuration file. Vue actually provides another option though, you can move the configuration to a "vue":{ ... } block inside of package.json.

As per the Vue Docs, this will limit you to only json-compatible values though and since your config uses functions, this might not be an option for you (unless you can find a way of achieving the same result in a json-compatible way)

For those viewing this who do have json-compatible values though, here's an example from my own project so you know what it should sort-of look like:

original vue.config.js (make sure to delete this file):

module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/main/background.js',
      rendererProcessFile: 'src/renderer/main.js',
      externals:['node-pty'],
    },
  },
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/renderer/assets/globals.scss";`
      }
    }
  }
}; 

moved inside package.json:

"vue": {
    "pluginOptions": {
      "electronBuilder": {
        "mainProcessFile": "src/main/background.js",
        "rendererProcessFile": "src/renderer/main.js",
        "externals":["node-pty"]
      }
    },
    "css": {
      "loaderOptions": {
        "sass": {
          "additionalData": "@import '@/renderer/assets/globals.scss';"
        }
      }
    }
  }

The whole thing seems to be a bug with the current vue cli configuration and node.js version. For more info check out the comment from @Dima Parzhitsky and @Zhang Buzz.

The best workaround for me was to simply use the @vue/cli@5.0.0-beta.7 in combination with node v16.12.0.

Also i use a vue.config.mjs instead of vue.config.js

Another solution could be to move the whole thing into the package.json, more about this in the comment of @James Batchelor (but i didn't test it)

I had a similar issue but with pm2 node process manager. I am trying to run a nodejs app in cluster mode, but it always ends in the same error code [ERR_UNSUPPORTED_ESM_URL_SCHEME]. This post is the top google result when searching for my issue, so leaving my method of solving it might be helpful to someone.

The solution is to install Windows Subsystem for Linux (WSL)

This allows you to run nodejs in Linux, where the above error can be avoided since the URL scheme would be accepted there. Notice the error message: Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

I had this issue a couple of days ago. I just upgraded node.js to version 16.13.1 and problem solved.